<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>创建规则</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		.creatSop_container{
			margin: 15px 15px 0 15px;
			background: #fff;
			padding: 15px 0 0 0;
		}
		.creatSop_headerExplain_container{
			padding: 0 25px;
		}
		.creatSop_headerExplain_container h2{
			padding-bottom: 12px;
			border-bottom: 1px solid #e9ebf3;
			font-size: 15px;
			font-weight: 500;
			color: #333;
			line-height: 21px;
		}
		.creatSop_headerExplain_container p{
			font-size: 14px;
			color: rgba(0,0,0,.45);
			margin-top: 6px;
		}
		.creatSop_addButton_container{
			padding: 15px 25px 0 25px;
		}
		.creatSop_main_container{
			margin: 0 15px 15px 15px;
			background: #fff;
			padding: 0 25px 25px 25px;
		}
		.creatSop_mainNoData_container{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 100px 0;
		}
		.creatSop_mainNoData_container img{
			width: 168px;
			height: 119px;
		}
		.creatSop_listTitle_container{
			display: flex;
			align-items: center;
			position: relative;
			padding: 10px 0;
		}
		.creatSop_listTitle_container svg{

		}
		.creatSop_listTitle_container h4{
			font-size: 14px;
			color: rgba(0,0,0,.85);
			font-weight: 500;
			flex: 1;
			margin-left: 5px;
		}
		.creatSop_list_content{
			width: 659px;
			background: #fbfbfb;
			border: 1px solid #f2f2f2;
			position: relative;
			padding: 0 20px 8px 16px;
		}
		.creatSop_list_content ul li{

		}
		.creatSop_list_content ul li span{
			font-size: 14px;
			color: #333;
		}
		.creatSop_list_content ul li a{
			font-size: 14px;
			color: #1890ff;
		}
		.creatSop_list_content ul li img{
			width: 80px;
			height: 80px;
			display: block;
			margin-top: 12px;
		}
		.creatSop_list_bg{
			margin-top: 12px;
			background: #fff;
			box-shadow: 0 0 2px 0 rgba(0,0,0,.04);
			border-radius: 2px 16px 16px 24px;
			border: 1px solid #f6f6f6;
			padding: 10px 16px;
			word-break: break-all;
		}
		.creatSop_mainCreatRule_container{
			padding-top: 10px;
		}
		.creatSop_listAbsolute_container{
			position: absolute;
			bottom: -4px;
			right: -65px;
		}
		.creatSop_listAbsolute_container svg{
			margin: 0 2px;
			background: #f0f0f0;
			padding: 2px;
			cursor: pointer;
		}
	</style>
</head>
<body>
<form class="layui-form" id="form1" action="">
<div class="creatSop_container">
	<div class="creatSop_header_container">
		<div class="layui-form-item">
			<label class="layui-form-label" style="padding-left: 0;">规则名称</label>
			<div class="layui-input-inline">
				<input type="text" name="password" required lay-verify="required" placeholder="请输入规则名称" autocomplete="off" class="layui-input">
			</div>
			<!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
		</div>
		<div class="creatSop_headerExplain_container">
			<h2>设置推送周期及文案</h2>
			<p>设置规则后将会通过「提醒」提醒群主发送推送内容</p>
		</div>
	</div>
	<div class="creatSop_addButton_container">
		<div class="creatSop_addButton_content">
			<button type="button" class="layui-btn layui-btn-normal add_Popup">+ 添加</button>
		</div>
	</div>
</div>
<div class="creatSop_main_container">
	<!-- 没数据时显示 -->
	<div class="creatSop_mainNoData_container" style="display: none;">
		<img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/c8cf6b99e879e239810ed9e4f40bd858.png">
	</div>
	<!-- 有数据时显示 -->
	<div class="creatSop_mainData_container"></div>

	<div class="creatSop_mainCreatRule_container">
		<button type="button" class="layui-btn layui-btn-normal submits">创建规则</button>
	</div>
</div>
</form>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		// 弹窗
		layui.use('layer', function(){
			var layer = layui.layer;
		}); 
		// 表单
		layui.use('form', function(){
			var form = layui.form;
		  //监听提交
		  form.on('submit(formDemo)', function(data){
		  	layer.msg(JSON.stringify(data.field));
		  	return false;
		  });
		});
		$('.add_Popup').on('click',function(){
			layer.open({
			  type: 2,
			  title: '设置推送内容',
			  shadeClose: true,
			  shade: 0.2,
			  area: ['750px', '640px'],
			  content: 'add_sops.html'
			}); 
		});
		$(".submits").on("click",function(){
			var index = $(".creatSop_listTitle_container input");
			for (var i=0;i<index.length;i++ ) {
				index[i].name="json"+i;
				// console.log(index[i]);
			}
			var formData = $('#form1').serialize();	
			var params = decodeURIComponent(formData,true);
			// console.log(params); 
			$.ajax({
	    	  type: 'POST',
	    	  url: 'add_sop.html',//发送请求
	    	  data: { params:params,leng:index.length},
	    	  dataType : "json",
	    	  success: function(result) {
    	  		if(result.status == 'success'){
					layer.msg(result.msg);
					window.location.href="index.html";
				}else{
					layer.msg(result.msg);
				}
	    	  }
	    	});
			// myAjaxPost(false, true, '', { params:params,leng:index.length}, function (resp) {
				// if(resp.status == 'success'){
				// 	layer.msg(resp.msg);
				// 	window.location.href="index.html";
				// }else{
				// 	layer.msg(resp.msg);
				// }
			// })
		})
		function delsop(s){
			// console.log(s);
			$('.creatSop_list_container_'+s).empty();
		}

		function updsop(sd){
			var zhi = $("#outputs"+sd).val();
			$.ajax({
	    	  type: 'POST',
	    	  url: 'upda_sop.html',//发送请求
	    	  data: { zhi:zhi,sd:sd},
	    	  dataType : "html",
	    	  success: function(result) {
	    	  	// console.log(result);return;
	    		  var htmlCont = result;//返回的结果页面
	    		  layer.open({
			          type: 1,//弹出框类型
			          title: '修改推送内容',
			          shadeClose: false, //点击遮罩关闭层
			          area : ['50%' , '60%'],
			          shift:1,
			          content: htmlCont,//将结果页面放入layer弹出层中
			          // success: function(layero, index){
			        	
			          // }
			      });
	    	  }
	    	});
		}
	</script>
</body>
</html>